/**
 * @author 善良的YWJ
 * @Created by shanliangdeYWJ on 2021/07/12 01:28:24
 * @file useTodos.js
 * @description
 * ```
 * 进一步抽取逻辑，让我们的setup函数看起来更加的清晰
 * 只需要有从上往下调用函数且返回值的形式即可
 *
 * 1. 我们先抽离了 todoStorage 函数因为他看起来其实 是相关度最低的
 * 2. 然后我们看到 todos 这个数据 来源于 todoStorage 我们将它抽出来 造一个函数返回即可
 * 3. 于是我们看到和 todos 相关的方法， todos 都已经抽出来了索性把这些相关的函数也抽离出来
 * ```
 * @link [Github](https://github.com/shanliangdeYWJ)
 */

import { ref, watchEffect } from "vue";

// 缓存操作
const todoStorage = {
  fetch() {
    /**@type {Array} todos */
    let todos = JSON.parse(localStorage.getItem("vue3-todos") || "[]");
    todos.forEach((todo, index) => {
      todo.id = index + 1;
    });
    return todos;
  },
  save(todos) {
    localStorage.setItem("vue3-todos", JSON.stringify(todos));
  },
};

export function useTodos(state) {
  const todos = ref(todoStorage.fetch());

  function addTodo() {
    todos.value.push({
      id: todos.value.length + 1,
      title: state.newTodo, // 因为这个newTodo是外界传入的，所以我们把外界的 state 传入
      completed: false,
    });
    state.newTodo = "";
  }

  function removeTodo(todo) {
    todos.value.splice(todos.value.indexOf(todo), 1);
  }

  // 副作用函数
  watchEffect(() => {
    todoStorage.save(todos.value);
  });

  return {
    todos,
    addTodo,
    removeTodo,
  };
}
